<template>
  <div class="report-container">
    <CommonCustomNavHead title="报告" theme="light" fixColor="#fff" navBgColor="#51D1E5" :pageOffsetTop="pageOffsetTop" :isBack="false" prePage="/pages/index/main" />
    <div class="content-box">
      <div v-if="token" class="typeTab">
        <div
          v-for="(item, index) in tab"
          :key="index"
          @click="handleTab(item)"
          class="tab-item">
          <div class="label">
            {{ item.label }}
            <div :class="item.value === filterForm.type ? 'label-con active' : 'label-con'">{{ item.label }}</div>
            <div v-if="item.value === filterForm.type" class="tab-item-bottom"></div>
          </div>
          <div class="count">{{ item.count }}</div>
        </div>

        <img @click="handleForm" class="shaixuan" src="https://www.thuguardian.com/files/small_program/filter.png" alt="">
      </div>

      <div v-if="token && reportList && reportList.length" class="list-box">
        <div
          v-for="(item, index) in reportList"
          :key="index"
          class="list-item"
          @click="handleResult(item)">
          <div class="time-line">
            <div class="circle"></div>
            <div class="line"></div>
          </div>
          <div class="report-con">
            <div class="item-top">
              <span class="time">{{ item.created_at }}</span>
              <span class="user">{{ item.type == 1 ? '自测' : '评估员：'+ (item.name || '--') }}</span>
            </div>
            <div class="item-card">
              <div class="report-title suspe">{{ item.title || '--' }}</div>
              <div class="report-status">
                <div v-if="item.type == 1" class="status">{{ item.week_result || '--' }}</div>
                <div v-else></div>
                <div class="btn">查看</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="empt-box">
        <img src="https://www.thuguardian.com/files/small_program/empty.png" alt="">
        <div class="font">暂无报告</div>
        <div v-if="!token" class="btn" @click="goLogin">登录</div>
      </div>
    
    </div>

    <!-- 筛选项 -->
    <van-popup
      :show="isShow"
      round
      position="bottom"
      bind:close="onClose"
    >
      <div class="time-form">
        <div class="form-label">筛选</div>
        <div class="quck-time">
          <div
            v-for="(item, index) in timeType"
            :key="index"
            class="time-item"
            @click="handleTimeType(item)"
            :class="item.value === filterForm.time_type ? 'active' : ''">{{ item.label }}</div>

        </div>
        <!-- 自定义筛选时间picker -->
        <div v-if="filterForm.time_type === -1" class="picker-box">
          <van-calendar
            :default-date="defaultDate"
            :show-title="false"
            :poppable="false"
            :show-confirm="false"
            type="range"
            :min-date="minDate"
            :max-date="maxDate"
            :allow-same-day="true"
            row-height="56"
            color="#00AFCB"
            class="calendar"
            @confirm="handleCalender"
          />
        </div>
        <div class="form-footer">
          <div class="handleReset" @click="handleReset">重置</div>
          <div class="handleConfirm" @click="handleConfirm">确定</div>
        </div>
      </div>
    </van-popup>

    <van-dialog id="van-dialog" class="dialog-content" />
  </div>
</template>

<script>
  import CommonCustomNavHead from '@/components/CommonCustomNavHead/index.vue';
  // import { getCurrentPage } from '@/utils/index.js';
  import Dialog from '@/wxcomponents/vant/dialog/dialog';
  import { questionnaireList } from '@/api/report/index.js'

  export default {
    components: {
      CommonCustomNavHead
    },
    data() {
      return {
        token: '',
        pageOffsetTop: 0,
        tab: [
          {
            value: 0,
            label: '全部',
            count: 0
          },
          {
            value: 1,
            label: '我的',
            count: 0
          },
          {
            value: 2,
            label: '评估员',
            count: 0
          }
        ],
        filterForm: {
          type: 0,
          keyword: '',
          time_type: 0,
          start_time: '',
          end_time: '',
          page: 1,
          order_key: '',
          order_value: 'desc',
          page_size: 20,
        },
        defaultDate: [],
        isShow: false,
        timeType: [
          {
            label: '全部',
            value: 0
          },
          {
            label: '近一年',
            value: 1
          },
          {
            label: '近半年',
            value: 2
          },
          {
            label: '近30天',
            value: 3
          },
          {
            label: '近7天',
            value: 4
          },
          {
            label: '自定义',
            value: -1
          }
        ],
        minDate: new Date().getTime() - 3 * (365 * 24 * 60 * 60 * 1000),
        maxDate: new Date().getTime(),
        reportList: [],
        isMore: true
      };
    },
    onLoad() {
      this.token = wx.getStorageSync('token');
      if (wx.getStorageSync('token')) {
        this.getlist()
      }
    },
    computed: {},
    created() {
    },
    methods: {
      goLogin() {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      },
      async getlist () {
        const params = {
          ...this.filterForm,
          start_time: this.defaultDate[0] ? Math.floor(this.defaultDate[0] / 1000) : '',
          end_time: this.defaultDate[1] ? Math.floor(this.defaultDate[1] / 1000) : ''
        }
        const res = await questionnaireList(params)
        if (res.code == 200) {
          const all = {
            value: 0,
            label: '全部',
            count: res.total
          }
          const my = {
            value: 1,
            label: '我的',
            count: res.self_quest
          }
          const access = {
            value: 2,
            label: '评估员',
            count: res.user_quest
          }
          this.tab = [all, my, access]
          if (this.filterForm.page == 1) {
            this.reportList = res.data
          } else {
            this.reportList = this.reportList.concat(res.data)
          }
          this.isMore = this.reportList?.length < res.total ? true : false
        }
      },
      handleTab (item) {
        this.filterForm.type = item.value
        this.filterForm.page = 1
        this.getlist()
      },
      handleForm () {
        this.isShow = true
      },
      handleTimeType (data) {
        this.filterForm.time_type = data.value
        this.defaultDate = this.filterForm.time_type == -1 ? (this.defaultDate?.length > 0 ? this.defaultDate : [new Date().getTime(), new Date().getTime()]) : []
      },
      handleCalender (event) {
        this.defaultDate = event.detail.map(v => {
          return v ? v.getTime() : null
        })
      },
      handleConfirm () {
        if (this.filterForm.time_type == -1 && (!this.defaultDate[0] ||!this.defaultDate[1])) {
          return false
        }
        this.isShow = false
        this.filterForm.page = 1
        this.getlist()
      },
      handleReset () {
        this.defaultDate = []
        this.filterForm = {
          type: 0,
          keyword: '',
          time_type: 0,
          start_time: '',
          end_time: '',
          page: 1,
          order_key: '',
          order_value: 'desc',
          page_size: 20,
        }
        this.isShow = false
        this.getlist()
      },
      handleResult (item) {
        if (item.type === 1) {
          // 自测
          wx.navigateTo({
            url: '/pages/result-info/main?taskId=' + item.id + '&from=report'
          })
        } else {
          // 评估员测试
          wx.navigateTo({
            url: '/pages/result-info-assessor/main?id=' + item.id + '&name=' + (item.name || '--')
          })
        }
      }
    },
    onPageScroll ({scrollTop}) {
      this.pageOffsetTop = scrollTop
    },
    onReachBottom() {
      if (this.isMore) {
        return
      }
      this.filterForm.page++
      this.getlist()
    },
    onPullDownRefresh() {
      if (!this.token) {
        return
      }
      this.handleReset()
    }
  };
</script>


<style lang="less">
.report-container {
  width: 100%;
  min-height: 80vh;
  background: url('https://www.thuguardian.com/files/small_program/bg01.png') no-repeat;
  background-size: 100% auto;
}
.content-box {
  padding-top: 80px;
  min-height: 80vh;
  width: 100%;
}


/* 顶部切换tab */
.typeTab {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  width: 100%;
  height: 63px;
  box-sizing: border-box;

  .tab-item {
    display: flex;
    align-items: flex-start;
    height: 23px;
    position: relative;
    &:not(:first-child) {
      margin-left: 32px;
    }

    // &.active{
    //   font-weight: 500;
    //   background: linear-gradient(2deg, #ACEFFA 20%, #4BCEE3 67.18%,  #4BCEE3 100%);;
    // }
    
    .label {
      font-weight: 400;
      color: transparent;
      font-size: 22px;
      line-height: 23px;
      position: relative;
      .label-con {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        color: rgba(0,0,0,.85);
        &.active {
          font-weight: 600;
        }
      }
      .tab-item-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10px;
        background: #ACEFFA;
      }
    }
    .count {
      margin-left: 4px;
      font-weight: 400;
      color: rgba(0,0,0,.85);
      font-size: 12px;
      line-height: 1;
    }
  }

  .shaixuan {
    margin-left: auto;
    display: block;
    width: 23px;
    height: 23px;
  }
}

// 列表
.list-box {
  margin-top: 10px;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
  
  .list-item {
    display: flex;
    align-items: stretch;
    &:last-child{
      .time-line {
        .line {
          display: none;
        }
      }
    }


    .time-line {
      width: 20px;

      .circle {
        width: 20px;
        height: 20px;
        background: #fff;
        border: 5px solid #00AFCB;
        border-radius: 50%;
        box-sizing: border-box;
      }
      .line {
        margin: 0 auto;
        width: 4px;
        height: calc(100% - 20px);
        background: #00AFCB;
      }
    }

    .report-con {
      padding-bottom: 24px;
      margin-left: 12px;
      line-height: 23px;
      width: calc(100% - 32px);

      .item-top {
        display: flex;
        align-items: center;
        width: 100%;
        .time {
          font-size: 20px;
          font-weight: 500;
          color: rgba(0, 0, 0, .65);
        }

        .user {
          margin-left: auto;
          font-size: 16px;
          color: rgba(0, 0, 0, .65);
        }
      }

      .item-card {
        margin-top:12px;
        padding: 16px;
        background: #fff;
        border-radius: 8px;
        .report-title {
          width: 100%;
          font-size: 20px;
          line-height: 28px;
        }
        .report-status {
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .status {
            font-size: 20px;
            line-height: 28px;
            color: #47B672;
          }

          .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 29px;
            font-size: 18px;
            color: #00AFCB;
            background: #B8F5FF;
            border-radius: 4px;
          }
        }
      }
    }
  }
}

// 污无数据
.empt-box {
  margin: 0 auto;
  margin-top: 50%;
  width: 100%;
  img {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
  }

  .font {
    margin-top: 16px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    line-height: 23px;
    color: rgba(0, 0, 0, .45);
  }

  .btn {
    margin: 16px auto;
    width: 145px;
    height: 48px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    line-height: 48px;
    text-align: center;
    border-radius: 48px;
    background: linear-gradient(93deg, #00AFCB 3.44%, #1097B4 54.73%);
  }
}

// picker
.time-form {
  padding: 0 30px;
  width: 100%;
  box-sizing: border-box;

  .form-label {
    padding: 20px 0;
    font-size: 18px;
    line-height: 23px;
    color:rgba(0, 0, 0, .85);
    border-bottom: 1px solid #F3F3F3;
  }

  .quck-time {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    .time-item {
      width: 94px;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      text-align: center;
      color: rgba(0, 0, 0, .65);
      background: #F4F4F4;
      border-radius: 40px;
      &.active {
        background: #ACEFFA;
      }
    }
  }

  .picker-box {
    margin-bottom: 20px;
    width: 100%;
    height: 328px;
    border-top: 1px solid #F3F3F3;
    // box-shadow: var(--calendar-header-box-shadow,0 2px 10px hsla(220,1%,50%,.16));
    // border: 1px solid ;
    
    /deep/ .van-calendar__header {
      box-shadow: none;
    }
  }
  .calendar {
    height: 328px;
  }

  .form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    // height: ;

    .handleReset {
      width: 90px;
      height: 40px;
      font-size: 20px;
      color: #00AFCB;
      line-height: 40px;
      text-align: center;
      background: #E5FAF7;
      border-radius: 40px;
    }
    .handleConfirm {
      width: 198px;
      height: 40px;
      font-size: 20px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      background: linear-gradient(93deg, #00AFCB 19.12%, #1097B4 62.08%);;
      border-radius: 40px;
    }
  }
}

</style>